<template>
    <div class="date-display">
        <div class="content">
            <div class="year-month">
                {{ currentDate.format('YYYY / MM') }}
                <div class="day">
                    {{ currentDate.format('DD') }}
                </div>
            </div>

            <div class="chinese-date">
                <div>星期{{ dayOfWeekChinese }}</div>
                <div>{{ lunarDateText }}</div>
                <div>{{ lunarDayText }}</div>
            </div>
        </div>
        <div class="footer-text">海浪的旋律</div>
    </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import dayjs from 'dayjs'
import Lunar from 'lunar-javascript'

const currentDate = ref(dayjs(new Date(2025,0,12)))
// console.log(dayjs())

const dayOfWeekMap = ['日', '一', '二', '三', '四', '五', '六']
const dayOfWeekChinese = computed(() =>
    dayOfWeekMap[currentDate.value.day()]
)

const lunarDateText = computed(() => {
    const lunar = Lunar.Lunar.fromDate(currentDate.value.toDate())
    return `${lunar.getMonthInChinese()}月${lunar.getDayInChinese()}`
})

const lunarDayText = computed(() => {
    const lunar = Lunar.Lunar.fromDate(currentDate.value.toDate())
    return `${lunar.getYearInGanZhi()}${lunar.getMonthInGanZhi()}日`
})

onMounted(() => {
    setInterval(() => {
        currentDate.value = dayjs()
    }, 60000)
})
</script>

<style scoped>
.date-display {
    width: 100%;
    height: 60%;
    aspect-ratio: 3 / 4;
    max-width: 400px;
    max-height: 600px;
    margin: auto;
    background-image: url('https://img.keaitupian.cn/newupload/09/1664359738368206.jpg');
    background-size: cover;
    background-position: center;
    color: white;
    display: grid;
    grid-template-rows: 1fr auto;
    padding: 1.5rem;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(136, 34, 34, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
}

.dates{
    gap: 2px;
}

.date-display:hover {
    transform: scale(1.02);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

.content {
    display: flex;
    /* flex-direction: column; */
    /* display: grid; */
    /* grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr;
    gap: 0.5rem; */
}

.year-month {
    /* grid-column: 1 / -1; */
    font-size: 0.8rem;
    /* font-weight: 500; */
}

.day {
    font-size: 4rem;
    /* font-weight: 300; */
    line-height: 1;
    align-self: center;
}

.chinese-date {
    margin-left: 45%;
    margin-top: 8%;
    text-align: right;
}

.chinese-date div {
    margin-bottom: 0.3rem;
}

.footer-text {
    font-size: 1rem;
    text-align: center;
    padding-top: 1rem;
}

.date-display * {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

@media (max-width: 400px) {
    .date-display {
        border-radius: 0;
        height: 100vh;
        max-height: none;
    }

    .day {
        font-size: 5rem;
    }

    .chinese-date {
        font-size: 0.8rem;
    }
}
</style>